<script setup>
import { ElMessage } from 'element-plus'
import { inject, onMounted, defineProps, ref } from 'vue'

const emit = defineEmits(['send', 'stop'])
const props = defineProps({
  showStopBtn: Boolean,
  content: String,
  placeholder: String,
  showContextBtn: Boolean,
})

const content = defineModel()
const isComposing = ref(false)

const inputRef = ref(null)
const inputSmRef = ref(null)

const clearContext = inject('clearContext')

const onCompositionStart = (e) => {
  isComposing.value = true
  console.log('onCompositionStart', e)
}

const onCompositionEnd = (e) => {
  setTimeout(() => {
    isComposing.value = false
    console.log('onCompositionEnd', e)
  }, 100)
}

// keydown监控
const keydown = (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
    content.value += '\n'
  } else if (e.key === 'Enter' && !e.shiftKey && !isComposing.value) {
    e.preventDefault()
    sendMessage()
    return false
  }
}

//发送消息
const sendMessage = () => {
  if (content.value.trim() === '') {
    ElMessage.warning('请输入内容')
    return
  }
  emit('send', content.value)
}

const focus = () => {
  inputRef.value?.focus()
  inputSmRef.value?.focus()
}

onMounted(() => {
  focus()
})

defineExpose({ focus })
</script>

<template>
  <div class="p-2 pt-1 border-t border-[--el-border-color] bg-[--el-bg-color]">
    <div class="relative w-full">
      <div><slot name="toolbar"></slot></div>
      <div class="flex items-end sm:hidden mt-1 space-x-1.5">
        <el-button
          type="default"
          style="width: 30px; height: 30px"
          plain
          title="清除上下文关联"
          v-if="props.showContextBtn || false"
          @click="clearContext"
        >
          <FontAwesomeIcon icon="broom" />
        </el-button>
        <div class="flex-1">
          <el-input
            ref="inputRef"
            type="textarea"
            resize="none"
            v-model="content"
            :placeholder="$attrs.promptPlaceholder || '请输入您的问题...'"
            :rows="1"
            :autosize="{ maxRows: 4 }"
            @keydown="keydown"
            @compositionstart="onCompositionStart"
            @compositionend="onCompositionEnd"
          />
        </div>
        <el-button
          type="primary"
          @click="sendMessage"
          style="width: 30px; height: 30px"
          v-if="!showStopBtn"
        >
          <FontAwesomeIcon icon="paper-plane" />
        </el-button>
        <el-button
          v-else
          type="primary"
          size="small"
          @click="$emit('stop')"
          style="width: 30px; height: 30px"
        >
          <FontAwesomeIcon icon="stop" />
        </el-button>
      </div>
      <div class="hidden sm:block mt-2">
        <el-input
          ref="inputSmRef"
          v-model="content"
          type="textarea"
          resize="none"
          input-style="background-color:var(--el-fill-color-lighter)"
          :rows="3"
          :placeholder="props.placeholder || '请输入您的问题...'"
          @keydown="keydown"
          @compositionstart="onCompositionStart"
          @compositionend="onCompositionEnd"
        ></el-input>
        <div class="flex justify-between mt-2">
          <div>
            <el-button
              size="small"
              plain
              style="width: 24px"
              title="清除上下文关联"
              v-if="props.showContextBtn || false"
              @click="clearContext"
              :disabled="showStopBtn"
            >
              <FontAwesomeIcon icon="broom" />
            </el-button>
          </div>
          <div class="flex items-center space-x-2">
            <span class="text-xs text-[--el-color-info]">Enter 发送 / Ctrl+Enter 换行</span>
            <el-button type="primary" size="small" @click="sendMessage" :disabled="showStopBtn">
              <FontAwesomeIcon icon="paper-plane" />
              <span class="pl-1">发送</span>
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
